window.onload = function() {
    const parent = document.getElementById('dm_d');
    parent.scrollTop = parent.scrollHeight;
};

function send() {
    var bv = $("#dmnr").val();
    tosend(bv);
    $("#dmnr").val("");
}

function videoup(videopath) {
    if(videopath != "" && videopath != null){
        $.ajax({
            type:"post",//请求类型
            url:"/module/video/changevideo",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                videopath:videopath
            },
            cache:false,//去除请求的缓存
            success:function(){
                tosend("切换了视频到"+videopath);
            }
        });
    }else{
        alert("请输入视频地址");
    }
}

function tosend(bv){
    var text = bv;
    if(text!="" && text!=null){
        $.ajax({
            type:"post",//请求类型
            url:"/module/video/sendtalk",//请求地址
            dataType:"json",//交互的数据类型
            data:{
                talk:text
            },
            cache:false,//去除请求的缓存
            success:function(){
                alert("发送成功");
                getTalkList();
            }
        });
    }else{
        alert("请输入发送内容");
    }
}


function getVideoPath(){
    var p = "";
    $.ajax({
        type:"post",//请求类型
        url:"/module/video/getvideopath",//请求地址
        dataType:"text",//交互的数据类型
        success:function(date){
            var videopath = $("#video_p").val();
            p = date;
            if(videopath!=date){
                location.reload();
            }
        }
    });
}

var flag = 0;
function getTalkList() {
    $.ajax({
        type:"post",//请求类型
        url:"/module/video/gettalk",//请求地址
        dataType:"text",//交互的数据类型
        cache:false,//去除请求的缓存
        success:function(msg){
            var result = $.parseJSON(msg);
            var list = result.talks;
            if(flag!=list.length){
                flag = list.length;
                var html = "";
                for(var i=0;i<list.length; i++){
                    var m = list[i];
                    html += "<div class=\"dm\">";
                    html += "<span>"+m.user.user_name+":</span>";
                    html += "<span>"+m.msg_content+"</span>";
                    html += "</div>";
                }
                $('#dm_d').html($('#dm_d').html()+html);
            }
        },
        error:function() {
            console.log("error");
        }
    });
}

var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');
var painting = false;
var canvasHistory = [];
var undoneActions = [];
var currentColor = '#000000';
var nowcolor = '#000000';

// 更新画笔粗细
function updateLineWidth(width) {
    ctx.lineWidth = width;
}

// 更新画笔颜色
function updateColor(newColor) {
    currentColor = newColor;
    ctx.strokeStyle = currentColor;
}

// 将当前画布状态保存到历史数组
function saveState() {
    canvasHistory.push(canvas.toDataURL());
    undoneActions = []; // 清空已撤回的数组
}

// 撤回函数
function undo() {
    if (canvasHistory.length > 0) {
        var lastState = canvasHistory.pop();
        undoneActions.push(lastState); // 将撤回的状态保存到另一个数组
        if (canvasHistory.length > 0) {
            var prevState = new Image();
            prevState.src = canvasHistory[canvasHistory.length - 1];
            prevState.onload = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(prevState, 0, 0);
            };
        } else {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 如果没有历史状态，清空画布
        }
    }
}

// 恢复函数
function redo() {
    if (undoneActions.length > 0) {
        var nextState = undoneActions.pop();
        canvasHistory.push(nextState);
        var img = new Image();
        img.src = nextState;
        img.onload = function() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0);
        };
    }
}

// 绑定撤回和恢复按钮
document.getElementById('undoButton').addEventListener('click', undo);
document.getElementById('redoButton').addEventListener('click', redo);

// 鼠标事件处理
canvas.addEventListener('mousedown', function(e) {
    painting = true;
    ctx.beginPath();
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
});

canvas.addEventListener('mousemove', function(e) {
    if (painting) {
        ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        ctx.stroke();
    }
});

canvas.addEventListener('mouseup', function() {
    painting = false;
    saveState();
});

canvas.addEventListener('mouseleave', function() {
    painting = false;
});

// 初始化画笔颜色
updateColor(currentColor);

// setInterval(function(){getVideoPath();},2500);
setInterval(function(){getTalkList();},1000);

var colors = ['#ff0000','#00ff00','#0000ff'];

layui.use(function(){
    var colorpicker = layui.colorpicker;
    // 渲染
    colorpicker.render({
        elem: '#colorPicker',
        color: '#000000',
        predefine: true, // 开启预定义颜色
        colors: colors ,
        done:function (color) {
            updateColor(color);
            $("#color").val(color);
            nowcolor = color;
        }
    });

    var slider = layui.slider;
    slider.render({
        elem: '#lineWidthInput',
        value: 1,
        min: 1,
        input: true, // 输入框
        type: 'vertical', // 垂直滑块
        theme: nowcolor,
        done: function(value){
            updateLineWidth(value);
        }
    });
});

document.getElementById('saveColor').addEventListener('click', saveColor);

function saveColor(){
    var color = $("#color").val();
    colors.push(color);
    if(colors.length>22){
        colors.shift();
    }
}